<template>
    <div class="dataPageFloatButton2" v-if="oItem && oItem.main.dataPageFloatBtn2Display&&(oItem.main.dataPageFloatBtnImg2||oItem.main.dataPageFloatBtnIcon2)" :style="{
        borderColor: oItem.main.floatBtnBorderColor||'transparent',
        backgroundColor: oItem.main.floatBtnBgColor,

    left: (oItem.main.floatBtn2Positon=='br' || oItem.main.floatBtn2Positon=='tr') ? 'auto': (oItem.main.floatBtn2OffsetLeftAndRight==100?'calc(100% - 60px)':(oItem.main.floatBtn2OffsetLeftAndRight+'%')),
    top: (oItem.main.floatBtn2Positon=='bl' || oItem.main.floatBtn2Positon=='br') ? 'auto': (oItem.main.floatBtn2OffsetUpAndDown==100? 'calc(100% - 50px)' : (oItem.main.floatBtn2OffsetUpAndDown+'%')),
    right: (oItem.main.floatBtn2Positon=='bl' || oItem.main.floatBtn2Positon=='tl') ? 'auto': (oItem.main.floatBtn2OffsetLeftAndRight==100?'calc(100% - 60px)':(oItem.main.floatBtn2OffsetLeftAndRight+'%')),
    bottom: (oItem.main.floatBtn2Positon=='tl' || oItem.main.floatBtn2Positon=='tr') ? 'auto': (oItem.main.floatBtn2OffsetUpAndDown==100?'calc(100% - 50px)' : (oItem.main.floatBtn2OffsetUpAndDown+'%')),  

}" :class="oItem.main.floatBtn2Positon">
        <img :src="oItem.main.dataPageFloatBtnImg2" v-if="oItem.main.dataPageFloatBtnImg2" alt="">
        <i :class="oItem.main.dataPageFloatBtnIcon2" v-if="!oItem.main.dataPageFloatBtnImg2&&oItem.main.dataPageFloatBtnIcon2" :style="{color:oItem.main.floatBtnIconColor}"></i>
    </div>
</template>
<script>
import Bus from "@/utils/bus";
import { mapState } from "vuex";
export default {
    name: "dataPageFloatButton2",
    data() {
        return {
            oItem: null,
            ename: "dataPageListComponent",
            id: "2-700002",
        }
    },
    created() {},
    props: [],
    components: {},
    mounted() {
        this.$nextTick(() => {
            this.init();
        });
    },
    methods: {
        //页面初始化
        init() {
            this.oItem = null;
            this.oItem = JSON.parse(JSON.stringify(this.decorate.controls[this.decorate.controls.length-1]));
        },
    },
    computed: mapState(["decorate"]),
    watch: {},
}
</script>
<style scoped lang="scss">
.dataPageFloatButton2{
   position: absolute;z-index: 10;border-radius:100%;border:5px solid #fff;
  box-shadow: -3px -3px 3px #eee,-3px 3px 3px #eee,3px -3px 3px #eee;width:60px;height:60px;display:flex;align-items: center;
  justify-content: center;cursor: pointer;
    i{font-size:24px;opacity:0.9;}
    img{width:100%;height:100%;border-radius:100%;}
    &.br{left:auto!important;top:auto!important;}
    &.bl{right:auto!important;top:auto!important;}
    &.tr{left:auto!important;bottom:auto!important;}
    &.tl{right:auto!important;bottom:auto!important;}
}

</style>